<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒计时时钟</title>
	<style type="text/css">
		.time-show {
			display: block;
			margin: 50px auto;
			border: 1px solid #DDD;
		}
	</style>
</head>
<body>
	<canvas id="time" width="1024" height="500" class="time-show"></canvas>
</body>
<script type="text/javascript">
	window.onload = function(){
		var canvas = document.getElementById('time');
		// canvas.width = 1024;
		// canvas.height 500;
		
		// 判断浏览器兼容
		if(canvas.getContext('2d')) {
			var context = canvas.getContext('2d');
		} else {
			alert('该浏览器不支持canvas！')
		}
		// context绘制
		context.beginPath();
		context.moveTo(512,0);
		context.lineTo(0,250);
		context.lineWidth = 1;
		context.strokeStyle = "#005588";
		context.closePath();

		context.stroke();
		// context.fillStyle = 'rgb(2,100,30)';
		// context.fill();
		
		context.beginPath();
		context.moveTo(512,0);
		context.lineTo(1024,250);
		context.lineWidth = 1;
		context.strokeStyle = "#005588";
		context.closePath();

		context.stroke();

		context.beginPath();
		context.moveTo(0,250);
		context.lineTo(512,500);
		context.lineWidth = 1;
		context.strokeStyle = "#005588";
		context.closePath();

		context.stroke();

		context.beginPath();
		context.moveTo(512,500);
		context.lineTo(1024,250);
		context.lineWidth = 1;
		context.strokeStyle = "#005588";
		context.closePath();

		context.stroke();

		context.beginPath();
		context.moveTo(512,0);
		context.lineTo(512,500);
		context.lineWidth = 1;
		context.strokeStyle = "#005588";
		context.closePath();

		context.stroke();

		context.beginPath();
		context.moveTo(0,250);
		context.lineTo(1024,250);
		context.lineWidth = 1;
		context.strokeStyle = "#005588";
		context.closePath();

		context.stroke();
		// context.beginPath();
		// context.moveTo(500,100);
		// context.lineTo(500,450);
		// context.lineWidth = 5;
		// context.strokeStyle = "#dddddd";
		// context.closePath();

		// context.stroke();

		// context.beginPath();
		// context.moveTo(500,100);
		// context.lineTo(500,450);
		// context.lineWidth = 5;
		// context.strokeStyle = "#dddddd";
		// context.closePath();

		// context.stroke();
	}
</script>
</html>